import "@/style/header/index.scss"
import { BgColorsOutlined, ExclamationCircleOutlined, LogoutOutlined, MoonOutlined, SunOutlined } from "@ant-design/icons";
import { Button, Card, Modal } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { setDark } from "@/store/slices/theme";
import ThemeModal from "@/pages/home/components/themeModal";
import { useState } from "react";
const header = (props: any) => {
    const dispatch = useDispatch()
    const theme = useSelector((state: any) => state.theme)

    const { title, info } = props
    info & info
    // 展示选择主题色
    const [showThemeModal, setShowThemeModal] = useState(false)

    const closeModal = () => {
        setShowThemeModal(false)
    }
    // 退出登录
      const [modal, contextHolder] = Modal.useModal();
    const showLogoutModal = () => {
     modal.confirm({
      title: '确认要退出登录吗？',
      icon: <ExclamationCircleOutlined />,
    //   content: 'Bla bla ...',
      footer: [
        <Button key="back" onClick={closeModal}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={() => {
           
        }}>
          确认
        </Button>,
      ],
    });
    }
    return (
        <Card className="header">
            <div className="headerLogo">Header:{title}</div>
            <div className="headerRight">
                {theme.dark ? <Button icon={<SunOutlined />} shape="circle" onClick={() => dispatch(setDark(false))}></Button> : <Button icon={<MoonOutlined />} shape="circle" onClick={() => dispatch(setDark(true))}></Button>}
                <Button icon={<BgColorsOutlined />} shape="circle" onClick={() => {setShowThemeModal(true)}}></Button>
                <Button icon={<LogoutOutlined />} shape="circle" onClick={() => showLogoutModal()}></Button>
            </div>
            {showThemeModal && <ThemeModal close={closeModal}></ThemeModal>}
             {contextHolder}
        </Card>
    );
};
export default header;